import React, { useContext, useState, useEffect } from "react";
import { AppState } from "../App";
import "../css/profile.css";
import "../css/loader.css";

export default function Profile({ address }) {
  const App = useContext(AppState);
  const [totalDonation, setTotalDonation] = useState(0);
  const [accountBalance, setAccountBalance] = useState(0);
  const [votedRequestData, setVotedRequestData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setLoading(true); // 设置加载状态为 true
      const totalDonationAmount = await App.Foundationcontract.getContributorMoney(address);
      const accountBalance = await App.Foundationcontract.getContributorBalance(address);
      const requestIds = await App.Foundationcontract.getContributorRequestIds(address);
      const requestAddresses = await App.Foundationcontract.getContributorAddresses(address);
      const descriptions = await App.Foundationcontract.getContributorDescriptions(address);
      const targetAmounts = await App.Foundationcontract.getContributorTargetAmounts(address);
      const completedStatus = await App.Foundationcontract.getContributorCompletedStatus(address);

      const votedRequests = requestIds.map((id, index) => ({
        uniqueid: id,
        recipient: requestAddresses[index],
        description: descriptions[index],
        targetMoney: targetAmounts[index],
        completed: completedStatus[index]
      }));
      console.log(votedRequests)
      setTotalDonation(totalDonationAmount);
      setAccountBalance(accountBalance);
      setVotedRequestData(votedRequests);
      setLoading(false); // 数据加载完成后设置 loading 状态为 false
    };

    fetchUserData();
  }, [address, App.Foundationcontract]);
  console.log(votedRequestData)
  
  return (
    <div className="profileDiv">
      {loading && <div className="loader"></div>}
      <div className="container mx-auto px-5 py-24">
        <div className="flex flex-col sm:flex-row items-end mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0">
          <div className="relative flex-grow w-full">
            <label htmlFor="full-name" className="leading-7 text-sm text-black">
              地址
            </label>
            <input
              type="text"
              id="full-name"
              name="full-name"
              value={address}
              readOnly
              className="inputStyle"
            />

            <label htmlFor="total-donation" className="leading-7 text-sm text-black">
              总捐款金额
            </label>
            <input
              type="text"
              id="total-donation"
              name="total-donation"
              value={totalDonation}
              readOnly
              className="inputStyle"
            />

            <label htmlFor="account-balance" className="leading-7 text-sm text-black">
              账户余额
            </label>
            <input
              type="text"
              id="account-balance"
              name="account-balance"
              value={accountBalance}
              readOnly
              className="inputStyle"
            />

            <label htmlFor="voted-requests" className="leading-7 text-sm text-black">
              已投票的筹款请求信息
            </label>
            <ul id="voted-requests" className="text-sm text-black">
              {votedRequestData.length === 0 ? (
                <p>暂无投票记录</p>
              ) : (
                votedRequestData.map((request, index) => (
                  <li key={index}>
                    <p>投票地址：{request.recipient}</p>
                    <p>请求描述：{request.description}</p>
                    <p>目标金额：“{request.targetMoney.toString()}”WEI</p>
                    <p>状态：{request.completed ? "已完成" : "未完成"}</p>
                    <hr />
                  </li>
                ))
              )}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
